<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    hostname: new URL('https://wzc570738205.github.io').hostname,
    root: '/',
    scheme: 'Gemini',
    version: '7.7.0',
    exturl: true,
    sidebar: {"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},
    copycode: {"enable":true,"show_result":true,"style":null},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":false},
    bookmark: {"enable":true,"color":"#222","save":"auto"},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    comments: {"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}
  };
</script>

  <meta name="description" content="前言VS Code  本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。">
<meta property="og:type" content="article">
<meta property="og:title" content="VSCode的使用">
<meta property="og:url" content="https://wzc570738205.github.io/2018/02/10/VSCode%E7%9A%84%E4%BD%BF%E7%94%A8/index.html">
<meta property="og:site_name" content="王志超的博客">
<meta property="og:description" content="前言VS Code  本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://img.smyhvae.com/20190313_1750_2.png">
<meta property="og:image" content="http://img.smyhvae.com/20190329_2120.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1738.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1739_2.png">
<meta property="og:image" content="http://img.smyhvae.com/20190329_1750_2.png">
<meta property="og:image" content="http://img.smyhvae.com/20190329_2110.png">
<meta property="og:image" content="http://img.smyhvae.com/20190414_1751.png">
<meta property="og:image" content="http://img.smyhvae.com/20191103_1327.png">
<meta property="og:image" content="http://img.smyhvae.com/20191108_1550.png">
<meta property="og:image" content="http://img.smyhvae.com/20190415_2009.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2140.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2156.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2216.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2213.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2205.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2207.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2209.png">
<meta property="og:image" content="http://img.smyhvae.com/20190417_2221.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1758.png">
<meta property="og:image" content="http://img.smyhvae.com/20190329_1756.png">
<meta property="og:image" content="http://img.smyhvae.com/20190329_1757.png">
<meta property="og:image" content="http://img.smyhvae.com/20190415_2052.png">
<meta property="og:image" content="http://img.smyhvae.com/20191108_1655.png">
<meta property="og:image" content="http://img.smyhvae.com/20190415_2107.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1850.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_2022.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_2023.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1907.png">
<meta property="og:image" content="http://img.smyhvae.com/20191108_1553_2.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1958.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_1937.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_2012.png">
<meta property="og:image" content="http://img.smyhvae.com/20190418_2005.png">
<meta property="article:published_time" content="2018-02-10T09:47:10.000Z">
<meta property="article:modified_time" content="2020-01-20T07:16:25.880Z">
<meta property="article:author" content="王志超">
<meta property="article:tag" content="VS Code">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://img.smyhvae.com/20190313_1750_2.png">

<link rel="canonical" href="https://wzc570738205.github.io/2018/02/10/VSCode%E7%9A%84%E4%BD%BF%E7%94%A8/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true
  };
</script>

  <title>VSCode的使用 | 王志超的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">王志超的博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <h1 class="site-subtitle" itemprop="description">今天你更博学了吗</h1>
      
  </div>

  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-归档">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>

</nav>
  <div class="site-search">
    <div class="popup search-popup">
    <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocorrect="off" autocapitalize="none"
           placeholder="搜索..." spellcheck="false"
           type="text" id="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result"></div>

</div>
<div class="search-pop-overlay"></div>

  </div>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <span class="exturl github-corner" data-url="aHR0cHM6Ly9naXRodWIuY29tL3d6YzU3MDczODIwNQ==" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></span>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wzc570738205.github.io/2018/02/10/VSCode%E7%9A%84%E4%BD%BF%E7%94%A8/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/logo.png">
      <meta itemprop="name" content="王志超">
      <meta itemprop="description" content="记录前端的点点滴滴">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="王志超的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          VSCode的使用
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-02-10 09:47:10" itemprop="dateCreated datePublished" datetime="2018-02-10T09:47:10+00:00">2018-02-10</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-01-20 07:16:25" itemprop="dateModified" datetime="2020-01-20T07:16:25+00:00">2020-01-20</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/" itemprop="url" rel="index">
                    <span itemprop="name">前端工具</span>
                  </a>
                </span>
            </span>

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2018/02/10/VSCode%E7%9A%84%E4%BD%BF%E7%94%A8/#comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2018/02/10/VSCode%E7%9A%84%E4%BD%BF%E7%94%A8/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>VS Code  本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。</p>
<a id="more"></a>
<div class="note success no-icon">
            <p>欢迎加入前端交流群：<a href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501" target="_blank" rel="noopener">749539640</a> </p>
          </div>

<h3 id="一、VS-Code-的介绍"><a href="#一、VS-Code-的介绍" class="headerlink" title="一、VS Code 的介绍"></a>一、VS Code 的介绍</h3><p>VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。</p>
<h3 id="编辑器-与-IDE"><a href="#编辑器-与-IDE" class="headerlink" title="编辑器 与 IDE"></a>编辑器 与 IDE</h3><p><code>IDE</code>和<code>编辑器</code>是有区别的：</p>
<ul>
<li><p><strong>IDE</strong> ：对代码会有较好的智能提示，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。</p>
</li>
<li><p><strong>编辑器</strong>：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。</p>
</li>
</ul>
<p>需要注意的是，VS Code 的定位是<code>编辑器</code>，而非<code>IDE</code>。但 VS Code 又比一般的编辑器的功能要丰富许多。</p>
<h3 id="VS-Code的一些补充"><a href="#VS-Code的一些补充" class="headerlink" title="VS Code的一些补充"></a>VS Code的一些补充</h3><ul>
<li><p>VS Code 的使命，是让开发者在编辑器里拥有 IDE 那样的开发体验，比如代码的智能提示、语法检查、图形化的调试工具、插件扩展、版本管理等。</p>
</li>
<li><p>VS Code 的源代码以MIT协议开源。</p>
</li>
<li><p>VS Code 自带了 TypeScript 和 Node.js 的支持。也就是说，你在书写 JS 和 TS 时，是自带智能提示的。</p>
</li>
<li><p>有一点你可能不知道，VS Code 这个客户端软件是用 js 语言开发出来的（具体请自行查阅关键字<code>Electron</code>）。有句话说得好：能用 js 实现的功能，最终一定会用 js 实现。</p>
</li>
</ul>
<h3 id="前端利器之争：-VS-Code-与-WebStorm"><a href="#前端利器之争：-VS-Code-与-WebStorm" class="headerlink" title="前端利器之争： VS Code 与  WebStorm"></a>前端利器之争： VS Code 与  WebStorm</h3><p>前端小白最喜欢问的一个问题是：哪个编辑器/IDE 好用？是VS Code还是 WebStorm （WebStorm 其实是 IntelliJ IDEA的定制版）？我来做个对比：</p>
<ul>
<li><p><strong>哪个更酷</strong>：显然 VS Code 更酷。</p>
</li>
<li><p><strong>内存占用情况</strong>：根据我的观察，VS Code是很占内存的（尤其是当你打开多个窗口的时候），但如果你的内存条够用的话，使用起来是不会有任何卡顿的感觉的。相比之下，IDEA 不仅非常占内存，而且还非常卡顿。</p>
</li>
<li><p><strong>使用比例</strong>：当然是 VS Code 更胜一筹。先不说别的，我就拿数据说话，我目前所在的前端团队有100人左右，绝大部分前端同学都在用  VS Code，妥妥的。</p>
</li>
</ul>
<p>所以，如果你以后还问这个问题，那就真有些掉底了。</p>
<h3 id="VS-Code-的安装"><a href="#VS-Code-的安装" class="headerlink" title="VS Code 的安装"></a>VS Code 的安装</h3><ul>
<li>VS Code 官网：<span class="exturl" data-url="aHR0cHM6Ly9jb2RlLnZpc3VhbHN0dWRpby5jb20=" title="https://code.visualstudio.com">https://code.visualstudio.com<i class="fa fa-external-link"></i></span></li>
</ul>
<p>VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。</p>
<p><img src="http://img.smyhvae.com/20190313_1750_2.png" alt=""></p>
<p>上图中，直接点击 download 下载安装即可。</p>
<h2 id="二、VS-Code快捷键"><a href="#二、VS-Code快捷键" class="headerlink" title="二、VS Code快捷键"></a>二、VS Code快捷键</h2><p>VS Code用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。</p>
<p>掌握10%的内容，足矣应对90%的工作。熟练使用它们，你就已经很牛了。</p>
<h3 id="移动光标"><a href="#移动光标" class="headerlink" title="移动光标"></a>移动光标</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Cmd + ←</strong></td>
<td align="left"><strong>Fn + ←</strong></td>
<td align="left">将光标定位到当前行的最左侧</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left"><strong>Cmd + →</strong></td>
<td align="left"><strong>Fn + →</strong></td>
<td align="left">将光标定位到当前行的最右侧</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left">Cmd + ↑</td>
<td align="left">Ctrl + Home</td>
<td align="left">将光标定位到文章的第一行</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Cmd + ↓</td>
<td align="left">Ctrl + End</td>
<td align="left">将光标定位到文章的最后一行</td>
<td align="left"></td>
</tr>
</tbody></table>
<p>根据上面的快捷键，我们可以举一反三。补充如下：</p>
<ul>
<li><p>「方向键」：在<strong>单个字符</strong>之间移动光标</p>
</li>
<li><p>「option + 左右方向键」：在<strong>单词</strong>之间移动光标（很常用）。注：Win 快捷键是「Ctrl + 左右方向键」。</p>
</li>
<li><p>「Cmd + 左右方向键」：在<strong>整行</strong>之间移动光标（很常用）。注：Win 的快捷键是「Fn + 左右方向键」</p>
</li>
<li><p>「<code>Cmd + Shift + \</code>」：在<strong>代码块</strong>之间移动光标。</p>
</li>
</ul>
<h3 id="删除操作"><a href="#删除操作" class="headerlink" title="删除操作"></a>删除操作</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>option + Backspace</strong></td>
<td align="left"><strong>Ctrl + Backspace</strong></td>
<td align="left">删除光标之前的一个单词</td>
<td align="left">英文有效，很常用</td>
</tr>
<tr>
<td align="left">option + delete</td>
<td align="left">Ctrl + delete</td>
<td align="left">删除光标之后的一个单词</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>Cmd + delete</strong></td>
<td align="left"></td>
<td align="left">删除光标之前的整行内容</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left">Cmd + delete</td>
<td align="left"></td>
<td align="left">删除光标之后的整行内容</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Cmd + shift + K</td>
<td align="left">Ctrl + Shift + K</td>
<td align="left">删除整行</td>
<td align="left">「Cmd + X」的作用是剪切，但也可以删除整行</td>
</tr>
</tbody></table>
<p>备注：上面所讲到的移动光标、删除操作的快捷键，在其他编辑器里，也是同样的操作。</p>
<h3 id="编辑操作"><a href="#编辑操作" class="headerlink" title="编辑操作"></a>编辑操作</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Cmd + Enter</strong></td>
<td align="left">Ctrl + Enter</td>
<td align="left">在当前行下面新增一行，然后跳至该行</td>
<td align="left">即使光标不在行尾，也能快速向下插入一行</td>
</tr>
<tr>
<td align="left"><strong>Option + ↑</strong></td>
<td align="left">Alt + ↑</td>
<td align="left">将代码向上移动</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left"><strong>Option + ↓</strong></td>
<td align="left">Alt + ↓</td>
<td align="left">将代码向下移动</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left"><strong>Option + Shift + ↑</strong></td>
<td align="left">Alt + Shift + ↑</td>
<td align="left">将代码向上复制</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left"><strong>Option + Shift + ↓</strong></td>
<td align="left">Alt + Shift + ↓</td>
<td align="left">将代码向下复制</td>
<td align="left">很常用</td>
</tr>
</tbody></table>
<h3 id="JS语言相关"><a href="#JS语言相关" class="headerlink" title="JS语言相关"></a>JS语言相关</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Cmd + /</td>
<td align="left">Ctrl + /</td>
<td align="left">添加单行注释</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left"><strong>Option + Shift + F</strong></td>
<td align="left">Alt + shift + F</td>
<td align="left">代码格式化</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left">Ctrl + J</td>
<td align="left"></td>
<td align="left">将多行代码合并为一行</td>
<td align="left">Win 用户可在命令面板搜索”合并行“</td>
</tr>
<tr>
<td align="left">Cmd +</td>
<td align="left"></td>
<td align="left"></td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Cmd + U</td>
<td align="left">Ctrl + U</td>
<td align="left">将光标的移动回退到上一个位置</td>
<td align="left">撤销光标的移动和选择</td>
</tr>
</tbody></table>
<h3 id="跳转操作"><a href="#跳转操作" class="headerlink" title="跳转操作"></a>跳转操作</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>Ctrl + Tab</strong></td>
<td align="left"><strong>Ctrl + Tab</strong></td>
<td align="left">在已经打开的文件之间进行跳转</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>Cmd + P</strong></td>
<td align="left">Ctrl + P</td>
<td align="left">在当前的项目工程里，<strong>全局</strong>搜索文件</td>
<td align="left">很常用</td>
</tr>
<tr>
<td align="left"><strong>Ctrl + G</strong></td>
<td align="left"><strong>Ctrl + G</strong></td>
<td align="left">跳转到指定行</td>
<td align="left"></td>
</tr>
<tr>
<td align="left">Cmd + Shift + O</td>
<td align="left">Ctrl + shift + O</td>
<td align="left">在当前文件的各种<strong>方法之间</strong>进行跳转</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left">Cmd + F</td>
<td align="left">Ctrl + F</td>
<td align="left">在当前文件中搜索，光标在搜索框里</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><strong>Cmd + G</strong></td>
<td align="left"><strong>F3</strong></td>
<td align="left">在当前文件中搜索，光标仍停留在编辑器里</td>
<td align="left">很巧妙</td>
</tr>
<tr>
<td align="left"><strong>Cmd + Shift + F</strong></td>
<td align="left">Ctrl + Shift +F</td>
<td align="left">全局搜索</td>
<td align="left">很常用</td>
</tr>
</tbody></table>
<h3 id="多光标的使用"><a href="#多光标的使用" class="headerlink" title="多光标的使用"></a>多光标的使用</h3><p><strong>技巧1</strong>：按住 「Option」键（windows 用户是按住「Alt」键） ，然后在页面中希望中现光标的位置点击鼠标。</p>
<p><strong>技巧2</strong>：选中某个文本，然后反复按住快捷键「 Cmd + D 」键（windows 用户是按住「Ctrl + D」键）， 即可将全文中与光标当前所在位置的词相同的词逐一加入选择。</p>
<p><strong>技巧3</strong>：选中一堆文本后，按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键），既可在<strong>每一行的末尾</strong>都创建一个光标。</p>
<h3 id="工作区快捷键"><a href="#工作区快捷键" class="headerlink" title="工作区快捷键"></a>工作区快捷键</h3><table>
<thead>
<tr>
<th align="left">Mac快捷键</th>
<th align="left">Win快捷键</th>
<th align="left">作用</th>
<th align="left">备注</th>
</tr>
</thead>
<tbody><tr>
<td align="left"><strong>cmd +/-</strong></td>
<td align="left"><strong>ctrl +/-</strong></td>
<td align="left">将工作区放大/缩小（包括代码字体、左侧导航栏）</td>
<td align="left">在投影仪场景经常用到</td>
</tr>
<tr>
<td align="left"><strong>Cmd + B</strong></td>
<td align="left">Ctrl + B</td>
<td align="left">显示/隐藏侧边栏</td>
<td align="left">很实用</td>
</tr>
<tr>
<td align="left"><code>Cmd + \</code></td>
<td align="left"><code>Ctrl + \</code></td>
<td align="left">创建多个编辑器</td>
<td align="left">比较实用</td>
</tr>
<tr>
<td align="left"><strong>Cmd + Option + 左右方向键</strong></td>
<td align="left">Ctrl + Pagedown/Pageup</td>
<td align="left">在已经打开的文件之间进行<strong>切换</strong></td>
<td align="left">非常实用</td>
</tr>
<tr>
<td align="left">Ctrl + Tab</td>
<td align="left">Ctrl + Tab</td>
<td align="left">在已经打开的文件之间进行跳转</td>
<td align="left">不如上面的快捷键实用</td>
</tr>
<tr>
<td align="left">Cmd + J</td>
<td align="left">Ctrl + J</td>
<td align="left">显示/隐藏控制台</td>
<td align="left"></td>
</tr>
</tbody></table>
<h3 id="自定义快捷键"><a href="#自定义快捷键" class="headerlink" title="自定义快捷键"></a>自定义快捷键</h3><p>按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。</p>
<p>当然，你也可以选择菜单栏「偏好设置 –&gt; 键盘快捷方式」，进入快捷键的设置：</p>
<p><img src="http://img.smyhvae.com/20190329_2120.png" alt=""></p>
<h3 id="快捷键列表"><a href="#快捷键列表" class="headerlink" title="快捷键列表"></a>快捷键列表</h3><p>你可以点击 VS Code 左下角的齿轮按钮，效果如下：</p>
<p><img src="http://img.smyhvae.com/20190418_1738.png" alt=""></p>
<p>上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：</p>
<p><img src="http://img.smyhvae.com/20190418_1739_2.png" alt=""></p>
<h2 id="四、命令面板的使用"><a href="#四、命令面板的使用" class="headerlink" title="四、命令面板的使用"></a>四、命令面板的使用</h2><p>Mac用户按住快捷键 <code>Cmd+Shift+P</code> （Windows用户按住快捷键<code>Ctrl+Shift+P</code>），可以打开命令面板。效果如下：</p>
<p><img src="http://img.smyhvae.com/20190329_1750_2.png" alt=""></p>
<p>如果们需要修改一些设置项，可以通过「命令面板」来操作，效率会更高。这里列举一些。</p>
<h3 id="字体设置"><a href="#字体设置" class="headerlink" title="字体设置"></a>字体设置</h3><p>在命令面板输入“字体”，可以进行字体的设置，效果如下：</p>
<p><img src="http://img.smyhvae.com/20190329_2110.png" alt=""></p>
<p>当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。</p>
<h3 id="快捷键设置"><a href="#快捷键设置" class="headerlink" title="快捷键设置"></a>快捷键设置</h3><p>在命令面板输入“快捷键”，就可以进入快捷键的设置。</p>
<h3 id="大小写转换"><a href="#大小写转换" class="headerlink" title="大小写转换"></a>大小写转换</h3><p>选中文本后，在命令面板中输入<code>transfrom</code>，就可以修改文本的大小写了。</p>
<p><img src="http://img.smyhvae.com/20190414_1751.png" alt=""></p>
<h3 id="使用命令行启动-VS-Code"><a href="#使用命令行启动-VS-Code" class="headerlink" title="使用命令行启动 VS Code"></a>使用命令行启动 VS Code</h3><p>（1）输入快捷键「Cmd + Shift + P 」，选择<code>install code command</code>：</p>
<p><img src="http://img.smyhvae.com/20191103_1327.png" alt=""></p>
<p>（2）使用命令行：</p>
<ul>
<li><p><code>code</code>命令：启动 VS Code 软件</p>
</li>
<li><p><code>code pathName/fileName</code>命令：通过 VS Code 软件打开指定目录/指定文件。</p>
</li>
</ul>
<h2 id="五、VS-Code-的常见设置项"><a href="#五、VS-Code-的常见设置项" class="headerlink" title="五、VS Code 的常见设置项"></a>五、VS Code 的常见设置项</h2><h3 id="1、VS-Code-设置为中文语言"><a href="#1、VS-Code-设置为中文语言" class="headerlink" title="1、VS Code 设置为中文语言"></a>1、VS Code 设置为中文语言</h3><p>Mac用户按住快捷键 <code>Cmd+Shift+P</code> （Windows用户按住快捷键<code>Ctrl+Shift+P</code>），打开命令面板。</p>
<p>在命令面板中，输入<code>Configure Display Language</code>，选择<code>Install additional languages</code>，然后安装插件<code>Chinese (Simplified) Language Pack for Visual Studio Code</code>即可。</p>
<p>或者，我们可以直接安装插件<code>Chinese (Simplified) Language Pack for Visual Studio Code</code>，是一样的。</p>
<p>安装完成后，重启VS Code。</p>
<h3 id="2、面包屑（Breadcrumb）"><a href="#2、面包屑（Breadcrumb）" class="headerlink" title="2、面包屑（Breadcrumb）"></a>2、面包屑（Breadcrumb）</h3><p>打开 VS Code 的设置项，选择「用户设置 -&gt; 工作台 -&gt; 导航路径」，如下图所示：</p>
<p><img src="http://img.smyhvae.com/20191108_1550.png" alt=""></p>
<p>上图中，将红框部分打钩即可。</p>
<p>设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：</p>
<p><img src="http://img.smyhvae.com/20190415_2009.png" alt=""></p>
<h3 id="3、是否显示代码的行号"><a href="#3、是否显示代码的行号" class="headerlink" title="3、是否显示代码的行号"></a>3、是否显示代码的行号</h3><p>VS Code 默认显示代码的行号。你可以在设置项里搜索 <code>editor.lineNumbers</code>修改设置，配置项如下：</p>
<p><img src="http://img.smyhvae.com/20190417_2140.png" alt=""></p>
<p>我建议保留这个设置项，无需修改。</p>
<h3 id="4、右侧是否显示代码的缩略图"><a href="#4、右侧是否显示代码的缩略图" class="headerlink" title="4、右侧是否显示代码的缩略图"></a>4、右侧是否显示代码的缩略图</h3><p>VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 <code>editor.minimap</code>进行设置，配置项如下：</p>
<p><img src="http://img.smyhvae.com/20190417_2156.png" alt=""></p>
<h3 id="6、将当前行代码高亮显示（更改光标所在行的背景色）"><a href="#6、将当前行代码高亮显示（更改光标所在行的背景色）" class="headerlink" title="6、将当前行代码高亮显示（更改光标所在行的背景色）"></a>6、将当前行代码高亮显示（更改光标所在行的背景色）</h3><p>当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想<strong>高亮显示</strong>当前行的代码，需要设置两步：</p>
<p>（1）在设置项里搜索<code>editor.renderLineHighlight</code>，将选项值设置为<code>all</code>或者<code>line</code>。</p>
<p>（2）在设置项里增加如下内容：</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">"workbench.colorCustomizations": &#123;</span><br><span class="line">    "editor.lineHighlightBackground": "#00000090",</span><br><span class="line">    "editor.lineHighlightBorder": "#00000000"</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>上面两行代码的意思是，修改光标所在行的背景色（背景色设置为全黑，透明度90%），修改光标所在行的边框色。</p>
<h3 id="7、改完代码后立即自动保存"><a href="#7、改完代码后立即自动保存" class="headerlink" title="7、改完代码后立即自动保存"></a>7、改完代码后立即自动保存</h3><p><strong>方式一</strong>：</p>
<p>改完代码后，默认不会自动保存。你可以在设置项里搜索<code>files.autoSave</code>，修改配置项如下：</p>
<p><img src="http://img.smyhvae.com/20190417_2216.png" alt=""></p>
<p>上图中，我们将配置项修改为<code>onFocusChange</code>之后，那么，当光标离开该文件后，这个文件就会自动保存了。<strong>非常方便</strong>。</p>
<p><strong>方式二</strong>：</p>
<p>当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选年后，当你写完代码后，文件会立即实时保存。</p>
<h3 id="8、保存代码后，是否立即格式化"><a href="#8、保存代码后，是否立即格式化" class="headerlink" title="8、保存代码后，是否立即格式化"></a>8、保存代码后，是否立即格式化</h3><p>保存代码后，默认<strong>不会立即</strong>进行代码的格式化。你可以在设置项里搜索<code>editor.formatOnSave</code>查看该配置项：</p>
<p><img src="http://img.smyhvae.com/20190417_2213.png" alt=""></p>
<p>我觉得这个配置项保持默认就好，不用打钩。</p>
<h3 id="9、空格-or-制表符"><a href="#9、空格-or-制表符" class="headerlink" title="9、空格 or 制表符"></a>9、空格 or 制表符</h3><p>VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下tab 键后，编辑器就会识别成制表符。</p>
<p>常见的设置项如下：</p>
<ul>
<li><strong>editor.detectIndentation</strong>：自动检测（默认开启）。截图如下：</li>
</ul>
<p><img src="http://img.smyhvae.com/20190417_2205.png" alt=""></p>
<ul>
<li><strong>editor.insertSpaces</strong>：按 Tab 键时插入空格（默认）。截图如下：</li>
</ul>
<p><img src="http://img.smyhvae.com/20190417_2207.png" alt=""></p>
<ul>
<li><strong>editor.tabSize</strong>：一个制表符默认等于四个空格。截图如下：</li>
</ul>
<p><img src="http://img.smyhvae.com/20190417_2209.png" alt=""></p>
<h3 id="10、新建文件后的默认文件类型"><a href="#10、新建文件后的默认文件类型" class="headerlink" title="10、新建文件后的默认文件类型"></a>10、新建文件后的默认文件类型</h3><p>当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。如果你想修改默认的文件类型，可以在设置项里搜索<code>files.defaultLanguage</code>，设置项如下：</p>
<p><img src="http://img.smyhvae.com/20190417_2221.png" alt=""></p>
<p>上图中的红框部分，填入你期望的默认文件类型。我填的是<code>html</code>类型，你也可以填写成 <code>javascript</code> 或者 <code>markdown</code>，或者其他的语言类型。</p>
<h3 id="11、删除文件时，是否弹出确认框"><a href="#11、删除文件时，是否弹出确认框" class="headerlink" title="11、删除文件时，是否弹出确认框"></a>11、删除文件时，是否弹出确认框</h3><p>当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索<code>xplorer.confirmDelete</code>。截图如下：</p>
<p><img src="http://img.smyhvae.com/20190418_1758.png" alt=""></p>
<p>我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？</p>
<h2 id="六、VS-Code-设置-高级进阶"><a href="#六、VS-Code-设置-高级进阶" class="headerlink" title="六、VS Code 设置-高级进阶"></a>六、VS Code 设置-高级进阶</h2><h3 id="1、文件对比"><a href="#1、文件对比" class="headerlink" title="1、文件对比"></a>1、文件对比</h3><p>VS Code 默认支持<strong>对比两个文件的内容</strong>。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：</p>
<p><img src="http://img.smyhvae.com/20190329_1756.png" alt=""></p>
<p>VS Code自带的对比功能并不够强大，我们可以安装插件<code>compareit</code>，进行更丰富的对比。比如说，安装完插件<code>compareit</code>之后，我们可以将「当前文件」与「剪切板」里的内容进行对比：</p>
<p><img src="http://img.smyhvae.com/20190329_1757.png" alt=""></p>
<h3 id="2、查找某个函数在哪些地方被调用了"><a href="#2、查找某个函数在哪些地方被调用了" class="headerlink" title="2、查找某个函数在哪些地方被调用了"></a>2、查找某个函数在哪些地方被调用了</h3><p>比如我已经在<code>a.js</code>文件里调用了 <code>foo()</code>函数。那么，如果我想知道<code>foo()</code>函数在其他文件中是否也被调用了，该怎么做呢？</p>
<p>做法如下：在 <code>a.js</code> 文件里，选中<code>foo()</code>函数（或者将光标放置在<code>foo()</code>函数上），然后按住快捷键「Shift + F12」，就能看到 <code>foo()</code>函数在哪些地方被调用了，比较实用。</p>
<h3 id="3、鼠标操作"><a href="#3、鼠标操作" class="headerlink" title="3、鼠标操作"></a>3、鼠标操作</h3><ul>
<li><p>在当前行的位置，鼠标三击，可以选中当前行。</p>
</li>
<li><p>用鼠标单击文件的<strong>行号</strong>，可以选中当前行。</p>
</li>
<li><p>在某个<strong>行号</strong>的位置，<strong>上下移动鼠标，可以选中多行</strong>。</p>
</li>
</ul>
<h3 id="4、重构"><a href="#4、重构" class="headerlink" title="4、重构"></a>4、重构</h3><p>重构分很多种，我们来举几个例子。</p>
<p><strong>1、命名重构</strong>：</p>
<p>当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。</p>
<p><strong>2、方法重构</strong>：</p>
<p>选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。</p>
<h3 id="5、在当前文件中搜索"><a href="#5、在当前文件中搜索" class="headerlink" title="5、在当前文件中搜索"></a>5、在当前文件中搜索</h3><p>在上面的快捷键列表中，我们已经知道如下快捷键：</p>
<ul>
<li><p>Cmd + F（Win用户是Ctrl + F）：在当前文件中搜索，光标在搜索框里</p>
</li>
<li><p>Cmd + G（Win用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里</p>
</li>
</ul>
<p>另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：</p>
<p><img src="http://img.smyhvae.com/20190415_2052.png" alt=""></p>
<p>上图中，你可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。</p>
<p>「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 <code>editor.find.autoFindInSelection</code>，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以<strong>自动</strong>只在这些内容里进行查找。该设置项如下图所示：</p>
<p><img src="http://img.smyhvae.com/20191108_1655.png" alt=""></p>
<h3 id="6、全局搜索"><a href="#6、全局搜索" class="headerlink" title="6、全局搜索"></a>6、全局搜索</h3><p>在上面的快捷键列表中，我们已经知道如下快捷键：</p>
<ul>
<li>Cmd + Shift + F（Win用户是Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果如下：</li>
</ul>
<p><img src="http://img.smyhvae.com/20190415_2107.png" alt=""></p>
<p>上图中，你可以点击红框部分，展开更多的配置项。</p>
<h3 id="7、Git版本管理"><a href="#7、Git版本管理" class="headerlink" title="7、Git版本管理"></a>7、Git版本管理</h3><p>VS Code 自带了 Git 版本管理，如下图所示：</p>
<p><img src="http://img.smyhvae.com/20190418_1850.png" alt=""></p>
<p>上图中，我们可以在这里进行常见的git 命令操作。如果你还不熟悉 <strong>Git版本管理</strong>，先去补补课吧。</p>
<p>与此同时，我建议安装插件<code>GitLens</code>，它是 VS Code 中我最推荐的一个插件，简直是Git神器，码农必备。</p>
<h3 id="8、将工作区放大-缩小"><a href="#8、将工作区放大-缩小" class="headerlink" title="8、将工作区放大/缩小"></a>8、将工作区放大/缩小</h3><p>我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。</p>
<p>如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「<strong>cmd +/-</strong>」。windows用户是按下「ctrl +/-」</p>
<p><strong>当我们在给别人演示代码的时候，这一招十分管用</strong>。</p>
<p>如果你想恢复默认的工作区大小，可以在命令面板输入<code>重置缩放</code>（英文是<code>reset zoom</code>）</p>
<h3 id="9、创建多层子文件夹"><a href="#9、创建多层子文件夹" class="headerlink" title="9、创建多层子文件夹"></a>9、创建多层子文件夹</h3><p>我们可以在新建文件夹的时候，如果直接输入<code>aa/bb/cc</code>，比如：</p>
<p><img src="http://img.smyhvae.com/20190418_2022.png" alt=""></p>
<p>那么，就可以创建多层子文件夹，效果如下：</p>
<p><img src="http://img.smyhvae.com/20190418_2023.png" alt=""></p>
<h3 id="10、-vscode-文件夹的作用"><a href="#10、-vscode-文件夹的作用" class="headerlink" title="10、.vscode 文件夹的作用"></a>10、.vscode 文件夹的作用</h3><p>如果你发现项目的根目录下有一个<code>.vscode</code>文件夹，说明这个文件夹代表的是当前项目的配置。</p>
<p>这个文件夹里可能包含以下集中文件：</p>
<ul>
<li><p><code>settings.json</code>：工作空间设置。只针对当前项目有效。比如说，我可以在这里面要求当前项目的代码统一使用制表符，而不需要要求每一位码农去修改各自的配置文件。</p>
</li>
<li><p><code>sftp.json</code>：ftp文件传输的配置。</p>
</li>
</ul>
<h3 id="11、自带终端"><a href="#11、自带终端" class="headerlink" title="11、自带终端"></a>11、自带终端</h3><p>我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 <strong>item2</strong>。</p>
<h3 id="12、markdown语法支持"><a href="#12、markdown语法支持" class="headerlink" title="12、markdown语法支持"></a>12、markdown语法支持</h3><p>VS Code自带 markdown 语法高亮，写完 md 文件之后，你可以点击右上角的按钮进行预览，如下图所示：</p>
<p><img src="http://img.smyhvae.com/20190418_1907.png" alt=""></p>
<p>你也可以在控制面板输入<code>Markdown: 打开预览</code>，直接全屏预览 markdown文件。</p>
<h3 id="13、Emmet-in-VS-Code"><a href="#13、Emmet-in-VS-Code" class="headerlink" title="13、Emmet in VS Code"></a>13、Emmet in VS Code</h3><p><code>Emmet</code>可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。</p>
<p>举个例子，我们在编辑器中输入缩写代码：<code>ul&gt;li*6</code> ，然后按下 Tab 键，即可得到如下代码片段：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。</p>
<h2 id="七、VS-Code-插件推荐"><a href="#七、VS-Code-插件推荐" class="headerlink" title="七、VS Code 插件推荐"></a>七、VS Code 插件推荐</h2><p>VS Code 有一个很强大的功能就是支持插件扩展。</p>
<p><img src="http://img.smyhvae.com/20191108_1553_2.png" alt=""></p>
<p>上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。</p>
<p>我来列举几个常见的插件，这些插件都很实用。</p>
<h3 id="GitLens"><a href="#GitLens" class="headerlink" title="GitLens"></a>GitLens</h3><p>我强烈建议你安装插件<code>GitLens</code>，它是 VS Code 中我最推荐的一个插件，简直是Git神器，码农必备。如果你不知道，那真是out了。</p>
<p>GitLens 在 Git 管理上有很多强大的功能，比如：</p>
<ul>
<li><p>将光标放置在代码的当前行，可以看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。</p>
</li>
<li><p>查看某个 commit 的代码改动记录</p>
</li>
<li><p>查看不同的分支</p>
</li>
<li><p>可以将两个 commit 进行代码对比</p>
</li>
<li><p>甚至可以将两个 branch 分支进行整体的代码对比。这一点，简直是 GitLens 最强大的功能。当我们在不同分支review代码的时候，就可以用到这一招。</p>
</li>
</ul>
<h3 id="Bracket-Pair-Colorizer-2：突出显示成对的括号【荐】"><a href="#Bracket-Pair-Colorizer-2：突出显示成对的括号【荐】" class="headerlink" title="Bracket Pair Colorizer 2：突出显示成对的括号【荐】"></a>Bracket Pair Colorizer 2：突出显示成对的括号【荐】</h3><p><code>Bracket Pair Colorizer 2</code>插件：以不同颜色显示成对的括号，并用连线标注括号范围。</p>
<p>另外，还有个<code>Rainbow Brackets</code>插件，也可以突出显示成对的括号。</p>
<h3 id="sftp：文件传输"><a href="#sftp：文件传输" class="headerlink" title="sftp：文件传输"></a>sftp：文件传输</h3><p>如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装<code>sftp</code>这个插件，很好用。在公司会经常用到。</p>
<p>步骤如下：</p>
<p>（1）安装插件<code>sftp</code>。</p>
<p>（2）配置 <code>sftp.json</code>文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入<code>sftp:config</code>，回车，当前工程的<code>.vscode</code>文件夹下就会自动生成一个<code>sftp.json</code>文件，我们需要在这个文件里配置的内容可以是：</p>
<ul>
<li><p><code>host</code>：服务器的IP地址</p>
</li>
<li><p><code>username</code>：工作站自己的用户名</p>
</li>
<li><p><code>privateKeyPath</code>：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是ppk文件）</p>
</li>
<li><p><code>remotePath</code>：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用sftp上传文件之前，要手动在工作站上mkdir生成这个根目录</p>
</li>
<li><p><code>ignore</code>：指定在使用sftp: sync to remote的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号</p>
</li>
</ul>
<p>举例如下：(注意，其中的注释需要去掉)</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">"host"</span>: <span class="string">"192.168.xxx.xxx"</span>,     <span class="comment">//服务器ip</span></span><br><span class="line">    <span class="attr">"port"</span>: <span class="number">22</span>,     <span class="comment">//端口，sftp模式是22</span></span><br><span class="line">    <span class="attr">"username"</span>: <span class="string">""</span>, <span class="comment">//用户名</span></span><br><span class="line">    <span class="attr">"password"</span>: <span class="string">""</span>, <span class="comment">//密码</span></span><br><span class="line">    <span class="attr">"protocol"</span>: <span class="string">"sftp"</span>, <span class="comment">//模式</span></span><br><span class="line">    <span class="attr">"agent"</span>: <span class="literal">null</span>,</span><br><span class="line">    <span class="attr">"privateKeyPath"</span>: <span class="literal">null</span>,</span><br><span class="line">    <span class="attr">"passphrase"</span>: <span class="literal">null</span>,</span><br><span class="line">    <span class="attr">"passive"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">"interactiveAuth"</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">"remotePath"</span>: <span class="string">"/root/node/build/"</span>,  <span class="comment">//服务器上的文件地址</span></span><br><span class="line">    <span class="attr">"context"</span>: <span class="string">"./server/build"</span>,        <span class="comment">//本地的文件地址</span></span><br><span class="line"></span><br><span class="line">    <span class="attr">"uploadOnSave"</span>: <span class="literal">true</span>,   <span class="comment">//监听保存并上传</span></span><br><span class="line">    <span class="attr">"syncMode"</span>: <span class="string">"update"</span>,</span><br><span class="line">    <span class="attr">"watcher"</span>: &#123;            <span class="comment">//监听外部文件</span></span><br><span class="line">        <span class="attr">"files"</span>: <span class="literal">false</span>,     <span class="comment">//外部文件的绝对路径</span></span><br><span class="line">        <span class="attr">"autoUpload"</span>: <span class="literal">false</span>,</span><br><span class="line">        <span class="attr">"autoDelete"</span>: <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">"ignore"</span>: [             <span class="comment">//忽略项</span></span><br><span class="line">        <span class="string">"**/.vscode/**"</span>,</span><br><span class="line">        <span class="string">"**/.git/**"</span>,</span><br><span class="line">        <span class="string">"**/.DS_Store"</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>（3）在 VS Code的当前文件里，选择「右键 -&gt; upload」，就可以将本地的代码上传到 指定的 ftp 服务器上（也就是在上方 <code>host</code> 中配置的服务器ip）。</p>
<p>我们还可以选择「右键 -&gt; Diff with Remote」，就可以将本地的代码和 ftp 服务器上的代码做对比。</p>
<h3 id="Project-Manager"><a href="#Project-Manager" class="headerlink" title="Project Manager"></a>Project Manager</h3><p>工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。</p>
<h3 id="open-in-browser"><a href="#open-in-browser" class="headerlink" title="open in browser"></a>open in browser</h3><p>安装<code>open in browser</code>插件后，在 HTML 文件中「右键选择 –&gt; Open in Default Browser」，即可在浏览器中预览网页。</p>
<h3 id="highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】"><a href="#highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】" class="headerlink" title="highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】"></a>highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】</h3><p>VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。</p>
<p>所用了这个插件之后，VS Code自带的高亮就可以关掉了：</p>
<p>在用户设置里添加<code>&quot;editor.selectionHighlight&quot;: false</code>即可。</p>
<p>参考链接：<span class="exturl" data-url="aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWkvYXJ0aWNsZS9kZXRhaWxzLzc5NTQ4MTY0" title="https://blog.csdn.net/palmer_kai/article/details/79548164">vscode 选中后相同内容高亮插件推荐<i class="fa fa-external-link"></i></span></p>
<h3 id="Color-Manager"><a href="#Color-Manager" class="headerlink" title="Color Manager"></a>Color Manager</h3><p>css 颜色管理。</p>
<h3 id="TODO-Highlight"><a href="#TODO-Highlight" class="headerlink" title="TODO Highlight"></a>TODO Highlight</h3><p>写代码过程中，突然发现一个Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个TODO注释。比如：（注意，一定要写成大写<code>TODO</code>，而不是小写的<code>todo</code>）</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;TODO:这里有个bug，我一会儿再收拾你</span><br></pre></td></tr></table></figure>

<p>或者：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;FIXME:我也不知道为啥， but it works only that way.</span><br></pre></td></tr></table></figure>

<p>安装了插件 <code>TODO Highlight</code>之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。</p>
<h3 id="WakaTime"><a href="#WakaTime" class="headerlink" title="WakaTime"></a>WakaTime</h3><p>统计写代码的时间。</p>
<h3 id="Code-Time"><a href="#Code-Time" class="headerlink" title="Code Time"></a>Code Time</h3><p><code>Code Time</code>插件：记录编程时间，统计代码行数。摸鱼必备。</p>
<p>安装该插件后，VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后，选择「Code Time Dashboard」，即可查看统计结果。</p>
<p>备注：团长试了一下这个 code time 插件，发现统计结果不是很准。</p>
<h3 id="Markdown-Preview-Github-Styling"><a href="#Markdown-Preview-Github-Styling" class="headerlink" title="Markdown Preview Github Styling"></a>Markdown Preview Github Styling</h3><p>以 GitHub 风格预览 Markdown 样式。</p>
<h3 id="Settings-Sync"><a href="#Settings-Sync" class="headerlink" title="Settings Sync"></a>Settings Sync</h3><ul>
<li><p>地址：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3NoYW5hbGlraGFuL2NvZGUtc2V0dGluZ3Mtc3luYw==" title="https://github.com/shanalikhan/code-settings-sync">https://github.com/shanalikhan/code-settings-sync<i class="fa fa-external-link"></i></span></p>
</li>
<li><p>作用：多台设备之间，同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。</p>
</li>
</ul>
<h3 id="vscode-syncing"><a href="#vscode-syncing" class="headerlink" title="vscode-syncing"></a>vscode-syncing</h3><ul>
<li><p>地址：<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL25vbm9yb2F6b3JvL3ZzY29kZS1zeW5jaW5n" title="https://github.com/nonoroazoro/vscode-syncing">https://github.com/nonoroazoro/vscode-syncing<i class="fa fa-external-link"></i></span></p>
</li>
<li><p>作用：多台设备之间，同步 VS Code 配置。</p>
</li>
</ul>
<h3 id="indent-rainbow：突出显示缩进"><a href="#indent-rainbow：突出显示缩进" class="headerlink" title="indent-rainbow：突出显示缩进"></a>indent-rainbow：突出显示缩进</h3><p><code>indent-rainbow</code>插件：突出显示缩进。</p>
<p>安装完成后，效果如下图所示：</p>
<p><img src="http://img.smyhvae.com/20190418_1958.png" alt=""></p>
<h3 id="RemoteHub"><a href="#RemoteHub" class="headerlink" title="RemoteHub"></a>RemoteHub</h3><p>不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。</p>
<p><code>RemoteHub</code>插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。</p>
<p><img src="http://img.smyhvae.com/20190418_1937.png" alt=""></p>
<p>这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。</p>
<h3 id="Live-Share：实时编码分享"><a href="#Live-Share：实时编码分享" class="headerlink" title="Live Share：实时编码分享"></a>Live Share：实时编码分享</h3><p><code>Live Share</code>这个神奇的插件是由微软官方出品，它的作用是：<strong>实时编码分享</strong>。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是<strong>结对编程</strong>的神器啊。</p>
<p>安装方式：</p>
<p>打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：</p>
<p><img src="http://img.smyhvae.com/20190418_2012.png" alt=""></p>
<p>上图中，点击红框部分，登录后就可以分享你的工作空间了。</p>
<p><img src="http://img.smyhvae.com/20190418_2005.png" alt=""></p>
<h3 id="vscode-pigments"><a href="#vscode-pigments" class="headerlink" title="vscode-pigments"></a>vscode-pigments</h3><p>css颜色高亮显示。</p>
<h2 id="八、主题插件"><a href="#八、主题插件" class="headerlink" title="八、主题插件"></a>八、主题插件</h2><ul>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPXpodWFuZ3RvbmdmYS5NYXRlcmlhbC10aGVtZQ==" title="https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme">One Dark Pro<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWFrYXJsc3Rlbi52c2NvZGUtc25henp5LWFrYXJsc3Rlbg==" title="https://marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten">Snazzy Plus<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9tYXJrZXRwbGFjZS52aXN1YWxzdHVkaW8uY29tL2l0ZW1zP2l0ZW1OYW1lPWFsZXhhbmRlcnRlLmRhaW50eS12c2NvZGU=" title="https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode">Dainty<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><code>SynthWave &#39;84</code></p>
</li>
</ul>
<blockquote>
<p><span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3FpYW5ndXlpaGFvL1dlYg==" title="https://github.com/qianguyihao/Web">转载连接<i class="fa fa-external-link"></i></span></p>
</blockquote>
<h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><ul>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vcG9zdC81ZDc0ZWI1YzUxODgyNTI1MDE3Nzg3ZDk=" title="https://juejin.im/post/5d74eb5c51882525017787d9">VS Code 折腾记 - (16) 推荐一波实用的插件集<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vcG9zdC81ZGI2NjY3MmYyNjVkYTRkMGUwMDlhYWQ=" title="https://juejin.im/post/5db66672f265da4d0e009aad">VSCode前端必备插件，有可能你装了却不知道如何使用？<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9qdWVqaW4uaW0vcG9zdC81YTA4ZDFkNmYyNjVkYTQzMGYzMTk1MGU=" title="https://juejin.im/post/5a08d1d6f265da430f31950e">能让你开发效率翻倍的 VSCode 插件配置（上）<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9zZWdtZW50ZmF1bHQuY29tL2EvMTE5MDAwMDAxMjgxMTg4Ng==" title="https://segmentfault.com/a/1190000012811886">https://segmentfault.com/a/1190000012811886<i class="fa fa-external-link"></i></span></p>
</li>
<li><p><span class="exturl" data-url="aHR0cHM6Ly9pZG91YmkuY2MvMjAxOS8wNy8wOC92c2NvZGUtc3VibGltZS10aGVtZS8=" title="https://idoubi.cc/2019/07/08/vscode-sublime-theme/">「Vscode」打造类sublime的高颜值编辑器<i class="fa fa-external-link"></i></span></p>
</li>
</ul>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/VS-Code/" rel="tag"># VS Code</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/" rel="prev" title="cordova+vue-cli4构建app">
      <i class="fa fa-chevron-left"></i> cordova+vue-cli4构建app
    </a></div>
      <div class="post-nav-item">
    <a href="/2018/11/15/%E4%BB%80%E4%B9%88%E6%98%AFURL%EF%BC%9F%E7%BD%91%E5%9D%80%E7%9A%84%E7%BB%84%E6%88%90/" rel="next" title="什么是URL？网址的组成">
      什么是URL？网址的组成 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let activeClass = CONFIG.comments.activeClass;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#一、VS-Code-的介绍"><span class="nav-number">1.1.</span> <span class="nav-text">一、VS Code 的介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#编辑器-与-IDE"><span class="nav-number">1.2.</span> <span class="nav-text">编辑器 与 IDE</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VS-Code的一些补充"><span class="nav-number">1.3.</span> <span class="nav-text">VS Code的一些补充</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前端利器之争：-VS-Code-与-WebStorm"><span class="nav-number">1.4.</span> <span class="nav-text">前端利器之争： VS Code 与  WebStorm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#VS-Code-的安装"><span class="nav-number">1.5.</span> <span class="nav-text">VS Code 的安装</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#二、VS-Code快捷键"><span class="nav-number">2.</span> <span class="nav-text">二、VS Code快捷键</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#移动光标"><span class="nav-number">2.1.</span> <span class="nav-text">移动光标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#删除操作"><span class="nav-number">2.2.</span> <span class="nav-text">删除操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#编辑操作"><span class="nav-number">2.3.</span> <span class="nav-text">编辑操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JS语言相关"><span class="nav-number">2.4.</span> <span class="nav-text">JS语言相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#跳转操作"><span class="nav-number">2.5.</span> <span class="nav-text">跳转操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#搜索"><span class="nav-number">2.6.</span> <span class="nav-text">搜索</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多光标的使用"><span class="nav-number">2.7.</span> <span class="nav-text">多光标的使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#工作区快捷键"><span class="nav-number">2.8.</span> <span class="nav-text">工作区快捷键</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自定义快捷键"><span class="nav-number">2.9.</span> <span class="nav-text">自定义快捷键</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#快捷键列表"><span class="nav-number">2.10.</span> <span class="nav-text">快捷键列表</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#四、命令面板的使用"><span class="nav-number">3.</span> <span class="nav-text">四、命令面板的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#字体设置"><span class="nav-number">3.1.</span> <span class="nav-text">字体设置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#快捷键设置"><span class="nav-number">3.2.</span> <span class="nav-text">快捷键设置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#大小写转换"><span class="nav-number">3.3.</span> <span class="nav-text">大小写转换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用命令行启动-VS-Code"><span class="nav-number">3.4.</span> <span class="nav-text">使用命令行启动 VS Code</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#五、VS-Code-的常见设置项"><span class="nav-number">4.</span> <span class="nav-text">五、VS Code 的常见设置项</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1、VS-Code-设置为中文语言"><span class="nav-number">4.1.</span> <span class="nav-text">1、VS Code 设置为中文语言</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2、面包屑（Breadcrumb）"><span class="nav-number">4.2.</span> <span class="nav-text">2、面包屑（Breadcrumb）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3、是否显示代码的行号"><span class="nav-number">4.3.</span> <span class="nav-text">3、是否显示代码的行号</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4、右侧是否显示代码的缩略图"><span class="nav-number">4.4.</span> <span class="nav-text">4、右侧是否显示代码的缩略图</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6、将当前行代码高亮显示（更改光标所在行的背景色）"><span class="nav-number">4.5.</span> <span class="nav-text">6、将当前行代码高亮显示（更改光标所在行的背景色）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7、改完代码后立即自动保存"><span class="nav-number">4.6.</span> <span class="nav-text">7、改完代码后立即自动保存</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8、保存代码后，是否立即格式化"><span class="nav-number">4.7.</span> <span class="nav-text">8、保存代码后，是否立即格式化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9、空格-or-制表符"><span class="nav-number">4.8.</span> <span class="nav-text">9、空格 or 制表符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10、新建文件后的默认文件类型"><span class="nav-number">4.9.</span> <span class="nav-text">10、新建文件后的默认文件类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11、删除文件时，是否弹出确认框"><span class="nav-number">4.10.</span> <span class="nav-text">11、删除文件时，是否弹出确认框</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#六、VS-Code-设置-高级进阶"><span class="nav-number">5.</span> <span class="nav-text">六、VS Code 设置-高级进阶</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1、文件对比"><span class="nav-number">5.1.</span> <span class="nav-text">1、文件对比</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2、查找某个函数在哪些地方被调用了"><span class="nav-number">5.2.</span> <span class="nav-text">2、查找某个函数在哪些地方被调用了</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3、鼠标操作"><span class="nav-number">5.3.</span> <span class="nav-text">3、鼠标操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4、重构"><span class="nav-number">5.4.</span> <span class="nav-text">4、重构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#5、在当前文件中搜索"><span class="nav-number">5.5.</span> <span class="nav-text">5、在当前文件中搜索</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#6、全局搜索"><span class="nav-number">5.6.</span> <span class="nav-text">6、全局搜索</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#7、Git版本管理"><span class="nav-number">5.7.</span> <span class="nav-text">7、Git版本管理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#8、将工作区放大-缩小"><span class="nav-number">5.8.</span> <span class="nav-text">8、将工作区放大&#x2F;缩小</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#9、创建多层子文件夹"><span class="nav-number">5.9.</span> <span class="nav-text">9、创建多层子文件夹</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10、-vscode-文件夹的作用"><span class="nav-number">5.10.</span> <span class="nav-text">10、.vscode 文件夹的作用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#11、自带终端"><span class="nav-number">5.11.</span> <span class="nav-text">11、自带终端</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#12、markdown语法支持"><span class="nav-number">5.12.</span> <span class="nav-text">12、markdown语法支持</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#13、Emmet-in-VS-Code"><span class="nav-number">5.13.</span> <span class="nav-text">13、Emmet in VS Code</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#七、VS-Code-插件推荐"><span class="nav-number">6.</span> <span class="nav-text">七、VS Code 插件推荐</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#GitLens"><span class="nav-number">6.1.</span> <span class="nav-text">GitLens</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Bracket-Pair-Colorizer-2：突出显示成对的括号【荐】"><span class="nav-number">6.2.</span> <span class="nav-text">Bracket Pair Colorizer 2：突出显示成对的括号【荐】</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#sftp：文件传输"><span class="nav-number">6.3.</span> <span class="nav-text">sftp：文件传输</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Project-Manager"><span class="nav-number">6.4.</span> <span class="nav-text">Project Manager</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#open-in-browser"><span class="nav-number">6.5.</span> <span class="nav-text">open in browser</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】"><span class="nav-number">6.6.</span> <span class="nav-text">highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Color-Manager"><span class="nav-number">6.7.</span> <span class="nav-text">Color Manager</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#TODO-Highlight"><span class="nav-number">6.8.</span> <span class="nav-text">TODO Highlight</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#WakaTime"><span class="nav-number">6.9.</span> <span class="nav-text">WakaTime</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Code-Time"><span class="nav-number">6.10.</span> <span class="nav-text">Code Time</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Markdown-Preview-Github-Styling"><span class="nav-number">6.11.</span> <span class="nav-text">Markdown Preview Github Styling</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Settings-Sync"><span class="nav-number">6.12.</span> <span class="nav-text">Settings Sync</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vscode-syncing"><span class="nav-number">6.13.</span> <span class="nav-text">vscode-syncing</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#indent-rainbow：突出显示缩进"><span class="nav-number">6.14.</span> <span class="nav-text">indent-rainbow：突出显示缩进</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#RemoteHub"><span class="nav-number">6.15.</span> <span class="nav-text">RemoteHub</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Live-Share：实时编码分享"><span class="nav-number">6.16.</span> <span class="nav-text">Live Share：实时编码分享</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vscode-pigments"><span class="nav-number">6.17.</span> <span class="nav-text">vscode-pigments</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#八、主题插件"><span class="nav-number">7.</span> <span class="nav-text">八、主题插件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参考链接"><span class="nav-number">8.</span> <span class="nav-text">参考链接</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="王志超"
      src="/images/logo.png">
  <p class="site-author-name" itemprop="name">王志超</p>
  <div class="site-description" itemprop="description">记录前端的点点滴滴</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">19</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3d6YzU3MDczODIwNQ==" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wzc570738205"><i class="fa fa-fw fa-github"></i>GitHub</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vd2FuZ3poaWNoYW8v" title="博客园 → https:&#x2F;&#x2F;www.cnblogs.com&#x2F;wangzhichao&#x2F;"><i class="fa fa-fw fa-globe"></i>博客园</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cDovL21haWwucXEuY29tL2NnaS1iaW4vcW1fc2hhcmU/dD1xbV9tYWlsbWUmZW1haWw9eHJHOHBmLXo5dkgzLTRhM3RfaWxxYXM=" title="E-Mail → http:&#x2F;&#x2F;mail.qq.com&#x2F;cgi-bin&#x2F;qm_share?t&#x3D;qm_mailme&amp;email&#x3D;xrG8pf-z9vH3-4a3t_ilqas"><i class="fa fa-fw fa-envelope"></i>E-Mail</span>
      </span>
      <span class="links-of-author-item">
        <a href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501" target="_blank" rel="noopener" title="QQ群 → &#x2F;&#x2F;shang.qq.com&#x2F;wpa&#x2F;qunwpa?idkey&#x3D;f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501"><i class="fa fa-fw fa-qq"></i>QQ群</a>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cDovL3dhbmd6Yy53YW5nL3dlYnNvY2tldC8=" title="websocket → http:&#x2F;&#x2F;wangzc.wang&#x2F;websocket&#x2F;"><i class="fa fa-fw fa-comments"></i>websocket</span>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
  
  &copy; 2015 – 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">王志超</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  




  
<script src="/js/local-search.js"></script>









<script>
if (document.querySelectorAll('div.pdf').length) {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js', () => {
    document.querySelectorAll('div.pdf').forEach(element => {
      PDFObject.embed(element.getAttribute('target'), element, {
        pdfOpenParams: {
          navpanes: 0,
          toolbar: 0,
          statusbar: 0,
          pagemode: 'thumbs',
          view: 'FitH'
        },
        PDFJS_URL: '/lib/pdf/web/viewer.html',
        height: element.getAttribute('height') || '700px'
      });
    });
  }, window.PDFObject);
}
</script>




  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el: '#valine-comments',
      verify: false,
      notify: false,
      appId: '9fgm6JVbw8PrOlvp7LfsKjsh-gzGzoHsz',
      appKey: 'LReLvzSwPnBOAz5LiIgJsiDO',
      placeholder: "说点什么吧",
      avatar: 'mm',
      meta: guest,
      pageSize: '10' || 10,
      visitor: false,
      lang: 'zh-cn' || 'zh-cn',
      path: location.pathname,
      recordIP: false,
      serverURLs: ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
